<template>
  <div class="button" :style="{ backgroundColor: disabled ? bgColor + '99' : bgColor }">
    <slot>按钮</slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed } from "vue";
type TButton = {
  type?: "primary" | "warn" | "error" | "info";
  size?: "size" | "middle" | "mini";
  disabled?: boolean;
};
const props = withDefaults(defineProps<TButton>(), {
  type: "primary",
  size: "middle",
  disabled: false,
});
const opacity = computed(() => {
  return props.disabled ? 1 : 0.8;
});
const bgColor = computed(() => {
  const color = {
    primary: "#5a9cf8",
    warn: "#dca550",
    error: "#e47470",
    info: "#919398",
  };
  return color[props.type];
});
</script>

<style scoped lang="scss">
.button {
  display: inline-block;
  width: 70px;
  height: 35px;
  padding: 0 6px;
  background-color: #5a9cf8;
  color: #fff;
  text-align: center;
  line-height: 35px;
  font-size: 13px;
  border-radius: 6px;
  &:hover {
    opacity: v-bind(opacity);
  }
}
</style>
